<template>
  <div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>视频源
        <small v-if="item.id">编辑视频源</small>
        <small v-else>新建视频源</small>
      </h1>
      <ol class="breadcrumb">
        <li>
          <router-link to="/"><i class="fa fa-dashboard"></i> 总览</router-link>
        </li>
        <li>
          <router-link to="/video/source">视频源管理</router-link>
        </li>
        <li class="active" v-if="item.id">编辑视频源</li>
        <li class="active" v-else>新建视频源</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="box box-primary">
        <!--<div class="box-header with-border">-->
        <!--</div>-->
        <!-- /.box-header -->
        <!-- form start -->
        <div class="box-body">

          <form class="form-horizontal" @submit="onSave">
            <div class="form-group" :class="{'has-error': item.$errors.has('resolution')}">
              <label for="field-resolution" class="col-sm-2 control-label">分辨率</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-resolution" v-model="item.resolution">
                <span class="help-block" v-if="item.$errors.has('resolution')">{{item.$errors.get('resolution')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('type')}">
              <label for="field-type" class="col-sm-2 control-label">类型</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-type" v-model="item.type">
                <span class="help-block" v-if="item.$errors.has('type')">{{item.$errors.get('type')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('url')}">
              <label for="field-url" class="col-sm-2 control-label">视频地址</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-url" v-model="item.url">
                <span class="help-block" v-if="item.$errors.has('url')">{{item.$errors.get('url')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('parameters')}">
              <label for="field-parameters" class="col-sm-2 control-label">参数</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="field-parameters" v-model="item.parameters">
                <span class="help-block" v-if="item.$errors.has('parameters')">{{item.$errors.get('parameters')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('video_id')}">
              <label for="field-video_id" class="col-sm-2 control-label">视频ID</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-video_id" style="width: 100%;"
                          placeholder="请选择视频ID"
                          v-model="item.video_id" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('video_id')">{{item.$errors.get('video_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('created_by')}">
              <label for="field-created_by" class="col-sm-2 control-label">添加人</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-created_by" style="width: 100%;"
                          placeholder="请选择添加人"
                          v-model="item.created_by" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('created_by')">{{item.$errors.get('created_by')}}</span>
              </div>
            </div>

          </form>
        </div>
        <!-- /.box-body -->

        <div class="box-footer">
          <router-link to="/video/source" class="btn btn-lg btn-flat btn-default pull-left">返回</router-link>
          <button type="submit" form="editing-form" class="btn btn-lg btn-flat btn-primary" @click="onSave"
                  :disabled="saving">
            {{saving?"保存中...":"保存"}}
          </button>
        </div>
      </div>

    </section>
    <!-- /.content -->
  </div>
</template>

<script type="javascript">
  import {Vue} from 'resources/assets/js/commons/vuejs.js';
  import {alert} from 'resources/assets/js/components/SweetAlertDialogs';
  import ErrorsBuilder from 'resources/assets/js/commons/ErrorsBuilder.js';

  var resourceURL = "/video/source";
  var resource = Vue.resource(resourceURL + '{/id}');
  // var resource = Vue.resource(resourceURL + '{/id}?_with=permissions,roles'); // 载入额外的关联数据(relationships)
  var vueConfig = {
    data: function () {
      var data = {
        item: {
          "id": null,
          "resolution": "",
          "type": "qiniu",
          "url": "",
          "parameters": "",
          "video_id": null,
          "created_by": null
        },
        saving: false
      };
      data.item.$errors = ErrorsBuilder();
      return data;
    },
    beforeRouteEnter (to, from, next) {
      if (to.params.id) {
        resource.get({id: to.params.id}).then(function (result) {
          next(function (vm) {
            vm.item = result.data.data;
            vm.item.$errors = ErrorsBuilder();
          })
        }).catch(function (err) {
          next(false);
        });
      }
      else {
        next();
      }
    },
    methods: {
      onSave: function (event) {
        this.saving = true;
        this.item.$errors.removeAll();

        var promise = null;
        let payload = $.extend(true, {}, this.item);
        if (payload.id) {
          promise = resource.update({id: payload.id}, payload).then(function (result) {
            window.toastr["success"]("编辑已保存");
            return result.data.data;
          });
        }
        else {
          promise = resource.save(payload).then(function (result) {
            window.toastr["success"]("新增成功");
            return result.data.data;
          });
        }

        promise.then(function (data) {
          return resource.get({id: data.id});
        }).then(function (result) {
          this.saving = false;
          this.item = result.data.data;
          this.item.$errors = ErrorsBuilder();
        }.bind(this)).catch(function (err) {
          this.saving = false;
          if (err.status == 422) {
            this.item.$errors.setAll(err.body);
          }
          else {
            alert(err.data.message);
          }
        }.bind(this));

        return false;
      },
    }
  };
  export default vueConfig;

</script>

<style lang="scss">

</style>
